<template>
  <div class="table-page">
    <GiTable
      row-key="id"
      title="原料管理"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      :disabled-tools="['size']"
      :disabled-column-keys="['name']"
      @refresh="search"
    >
      <template #toolbar-left>
        <device-type v-model="queryForm.deviceTypeId" @change="search" />
        <a-input v-model="queryForm.materialName" placeholder="请输入原料名称" allow-clear @change="search">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
        <a-select
          v-model="queryForm.status"
          :options="dis_enable_status_enum"
          placeholder="请选择状态"
          allow-clear
          style="width: 100px"
          @change="search"
        />
        <a-button @click="reset">
          <template #icon>
            <icon-refresh />
          </template>
          <template #default>重置</template>
        </a-button>
      </template>
      <template #toolbar-right>
        <a-button v-permission="['vending:material:add']" type="primary" @click="onAdd">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>新增</template>
        </a-button>
      </template>
      <template #materialType="{ record }">
        <GiCellTag :value="record.materialType" :dict="material_type" />
      </template>
      <template #status="{ record }">
        <GiCellStatus :status="record.status" />
      </template>
      <template #qty="{ record }">
        {{ record.qty + record.qtyUnit }}
      </template>
      <template #warnQty="{ record }">
        {{ record.warnQty + record.qtyUnit }}
      </template>
      <template #inventoryCheck="{ record }">
        <a-tag v-if="record.inventoryCheck" color="arcoblue" size="small">是</a-tag>
        <a-tag v-else color="red" size="small">否</a-tag>
      </template>
      <template #inventoryConsume="{ record }">
        <a-tag v-if="record.inventoryConsume" color="arcoblue" size="small">是</a-tag>
        <a-tag v-else color="red" size="small">否</a-tag>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['vending:material:list']" title="查看" @click="onDetail(record)">查看</a-link>
          <a-link v-permission="['vending:material:update']" title="修改" @click="onUpdate(record)">修改</a-link>
          <a-link
            v-permission="['vending:material:delete']"
            status="danger"
            title="删除"
            @click="onDelete(record)"
          >
            删除
          </a-link>
        </a-space>
      </template>
    </GiTable>

    <MaterialAddModal ref="MaterialAddModalRef" @save-success="search" />
    <MaterialDetailDrawer ref="MaterialDetailDrawerRef" />
  </div>
</template>

<script setup lang="ts">
import type MaterialAddModal from './MaterialAddModal.vue'
import type MaterialDetailDrawer from './MaterialDetailDrawer.vue'
import type { TableInstanceColumns } from '@/components/GiTable/type'
import { useTable } from '@/hooks'
import { isMobile } from '@/utils'
import has from '@/utils/has'
import { type MaterialQuery, type MaterialResp, deleteMaterial, listMaterial } from '@/apis/vending/matreial'
import { useDict } from '@/hooks/app'

defineOptions({ name: 'Material' })

const { material_type, dis_enable_status_enum } = useDict('material_type', 'dis_enable_status_enum')

const queryForm = reactive<MaterialQuery>({
  deviceTypeId: '',
  materialName: '',
  materialType: '',
  status: '',
  sort: ['createTime,desc'],
})

const {
  tableData: dataList,
  loading,
  pagination,
  search,
  handleDelete,
} = useTable((page) => listMaterial({ ...queryForm, ...page }), { immediate: true })

const columns: TableInstanceColumns[] = [
  { title: '原料编号', dataIndex: 'materialCode', slotName: 'materialCode', align: 'center' },
  { title: '原料名称', dataIndex: 'materialName', slotName: 'materialName', align: 'center' },
  { title: '机型', dataIndex: 'deviceType', slotName: 'deviceType', align: 'center' },
  { title: '原料类型', dataIndex: 'materialType', slotName: 'materialType', align: 'center' },
  {
    title: '原料描述',
    dataIndex: 'description',
    slotName: 'description',
    align: 'center',
    show: false,
    ellipsis: true,
    tooltip: true,
  },
  { title: '容量', dataIndex: 'qty', slotName: 'qty', align: 'center' },
  { title: '预警数量', dataIndex: 'warnQty', slotName: 'warnQty', align: 'center' },
  { title: '消耗速率', dataIndex: 'consumeRate', slotName: 'consumeRate', align: 'center' },
  { title: '库存校验', dataIndex: 'inventoryCheck', slotName: 'inventoryCheck', align: 'center' },
  { title: '库存消耗', dataIndex: 'inventoryConsume', slotName: 'inventoryConsume', align: 'center' },
  { title: '状态', dataIndex: 'status', slotName: 'status', align: 'center' },
  { title: '创建人', dataIndex: 'createUserString', slotName: 'createUserString', align: 'center' },
  { title: '创建时间', dataIndex: 'createTime', slotName: 'createTime', align: 'center' },
  { title: '修改人', dataIndex: 'updateUserString', slotName: 'updateUserString', align: 'center', show: false },
  { title: '修改时间', dataIndex: 'updateTime', slotName: 'updateTime', align: 'center', show: false },
  {
    title: '操作',
    slotName: 'action',
    width: 130,
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
    show: has.hasPermOr(['vending:material:update', 'vending:material:delete']),
  },
]

// 重置
const reset = () => {
  queryForm.deviceTypeId = ''
  queryForm.materialName = ''
  queryForm.materialType = ''
  queryForm.status = ''
  search()
}

// 删除
const onDelete = (record: MaterialResp) => {
  return handleDelete(() => deleteMaterial(record.id), {
    content: `是否确定删除该条数据？`,
    showModal: true,
  })
}

const MaterialAddModalRef = ref<InstanceType<typeof MaterialAddModal>>()
// 新增
const onAdd = () => {
  MaterialAddModalRef.value?.onAdd()
}

// 修改
const onUpdate = (record: MaterialResp) => {
  MaterialAddModalRef.value?.onUpdate(record.id)
}

const MaterialDetailDrawerRef = ref<InstanceType<typeof MaterialDetailDrawer>>()
// 详情
const onDetail = (record: MaterialResp) => {
  MaterialDetailDrawerRef.value?.onDetail(record.id)
}
</script>

<style lang="scss" scoped></style>
